<style>
    .ivu-table th {
    background-color: #fff !important;
}
</style>
<template>
    <div>
        <div class="ivu-mt">
            <el-card :bordered="false">
                <p class="card-title">
                    {{$t('message.notice.have_chosen')}} : {{countDocSelected()}}
                </p>
                <el-divider dashed />
                <StretchTable :columns="columnsDefinition" :stretchColums="stretchColums" :data="dataList" @on-selection-change="onDocSelectChange"></StretchTable>
                <!-- Table :columns="columnsDefinition" :data="dataList" @on-selection-change="onDocSelectChange"></Table -->
                <div style="text-align: right;  margin-top: 20px">
                    <el-button type="success" @click="nextStep()">下一步</el-button>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
import { API } from '@/customized/http/api';''
import StretchTable from '@/views/components/stretch-table/stretch-table.vue'
export default {
    /*从父路由注入父路由页面的函数*/
    inject: ['next', 'back'],
    components: {
        StretchTable
    },
    data() {
        return {
            isCollapsed: false,
            loginModal: false,
            columnsDefinition: [{
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '文件名',
                    key: 'name',
                    ellipsis: true,
                    tooltip: true
                },
                {
                    title: '价格(元)',
                    width: 120,
                    key: 'price',
                    align: 'right'
                },
                {
                    title: '优惠后价格',
                    width: 120,
                    key: 'finalPrice',
                    align: 'right'
                }
            ],
            stretchColums: ['price'],
            dataList: [],
            tagIdArray: []
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
    },
    watch: {
        $route(to) {
            this.init();
        }
    },
    computed: {
        dataSelected: {
            get() {
                /*注意getters的用法*/
                return this.$store.getters.docSelected;
            },
            set(val) {
                this.$store.commit('saveDocSelected', val);
            }
        }
    },
    methods: {
        init() {
            this.dataList = [];
            this.search(this.$route.params.docType);
        },
        nextStep() {
            if(!this.dataSelected || this.dataSelected.length === 0) {
                this.$notify.warning({
                    title: this.$t('message.notice.warning'),
                    desc: this.$t('message.notice.please_pick_some_documents')
                });
                return;
            } 
            this.next(this.$route.name);
        },
        searchWord(tagIds) {
            /*{"tags":[1,4,12]}*/
            let postJson = {};
            postJson.tags = tagIds;
            API.searchWord({ formData: JSON.stringify(postJson) })
                .then((res) => {
                    this.dataList = res.data;
                    let newDataSelected = [];
                    if (!!this.dataSelected) {
                        this.dataList.map(item => {
                            let exist = this.dataSelected.some(it => {
                                return it.id === item.id;
                            })

                            if (exist) {
                                item._checked = true;
                                newDataSelected.push(item); // 更新dataSelected中的数据，比如价格已经变化了
                            } else {
                                delete item._checked;
                            }
                        })
                        this.dataSelected = newDataSelected;
                    }
                }).catch((error) => {
                    console.log(error);
                });
        },
        /*勾选了哪些文件*/
        onDocSelectChange(selection) {
            this.dataSelected = selection;
        },
        /*勾选了的文件数量*/
        countDocSelected() {
            return this.dataSelected.length;
        },
        search(docType) {
            API.getTagId({
                domain: docType
            }).then((res) => {
                if (!!res) {
                    let tagOptions = res.data;
                    let tagIdArray = tagOptions.map(item => {
                        return item.value;
                    });
                    this.searchWord(tagIdArray);
                }
            }).catch((error) => {
                console.log(error);
            });

        }
    }
}
</script>